<!DOCTYPE html>
<html>
  <head>
  <script type="text/javascript">
	var image_path='src="images/';
	var image_path_r='images/';
	


</script>

    <meta name="viewport" http-equiv="Content-Type"  charset="gb2312" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    
    <title>Webcrab client</title>

	<link rel="stylesheet" href="css/demo.css">
	<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
	<link rel="stylesheet" href="css/w3.css">


	<link rel="stylesheet" href="css/w3-theme-red.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	
	
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery-ui.min.js"></script>

	<script src="js/jquery.ui.touch-punch.js"></script>
	<script src="js/jquery.mobile-1.4.5.js"></script>
	<script src="js/robot.js"></script>

	
<script>
			var SQUARIFIC = {};
			window.requestAnimationFrame = (function(){
			  return  window.requestAnimationFrame       || 
					  window.webkitRequestAnimationFrame || 
					  window.mozRequestAnimationFrame    || 
					  window.oRequestAnimationFrame      || 
					  window.msRequestAnimationFrame     || 
					  function( callback ){
					    window.setTimeout(callback, 1000 / 60);
					  };
			})();
</script>
		
<style>
.box{
	position:fixed;
	bottom:-100%;
	right:0%;
	height:50%; 
	background-color: transparent;
	width: 50%; 
	display: block;
	z-index:999999;
	padding: 0.5em;
}
.box-inner {
    position: absolute;
    width:100%;
    top: 0px;
    bottom: 0px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

.vranger {

  -webkit-appearance: slider-vertical;
}


.loading {
	background:   url(loading.gif) center center no-repeat;
	background-size: 30px 30px;
	

}

video.background {
	background: black;
}
video.loading {
	background: black url(loading.gif) center center no-repeat;
	background-size: 80px 80px;
}


</style>

    <style>
    #credentials, #dialler, #messages {
      clear: both;
    }
    #remote-video {
      max-width: 600px;
	 
    }
    #local-video {
      max-width: 150px;
    }
    .ui-icon-call { 
	background-image: url("images/call.png"); 
    }
    
	img {
	    position: absolute;
	}

	img#c_front {
	    top: 0%; left: 37%;
	    nav-index: 1;
	    nav-right: #b2; nav-left: #b4;
	    nav-down: #b2; nav-up: #b4;
	}

	img#c_right {
	    top: 37%; left: 74%;
	    nav-index: 2;
	    nav-right: #b3; nav-left: #b1;
	    nav-down: #b3; nav-up: #b1;
	}

	img#c_back {
	    top: 74%; left: 37%;
	    nav-index: 3;
	    nav-right: #b4; nav-left: #b2;
	    nav-down: #b4; nav-up: #b2;
	}

	img#c_left {
	    top: 37%; left: 0%;
	    nav-index: 4;
	    nav-right: #b1; nav-left: #b3;
	    nav-down: #b1; nav-up: #b3;
	}
	img#c_center {
	    top: 37%; left: 37%;
	    nav-index: 3;
	    nav-right: #b4; nav-left: #b2;
	    nav-down: #b4; nav-up: #b2;
	}

	#draggable { width: 150px; height: 150px; padding: 5px;  border:0px solid red;}

    </style>




	

  </head>

  <body onload="initialize()" style="-moz-user-select:none;-webkit-user-select:none;">

<div  class="box" id="boxp">
	<div data-role="controlgroup" data-type="horizontal">
		<button  class="ui-btn ui-btn-inline" id="offs" onclick="car_runhi()">car_runhi</button>
		<button   id="" onclick="car_run()">car_run </button>
		<button    id="" onclick="car_stop()">car_stop </button>
		<button    id="" onclick="car_left()">car_left </button>
	</div>	
	<div data-role="controlgroup" data-type="horizontal">
		<button    id="" onclick="car_right()">car_right  </button>
		<button   id="" onclick="car_back()">car_back </button>
	</div>		
		<input type="select" id="net_send-id" size="15">
		<button   id="" onclick="net_send()">net send </button>

		<a  id="closeb" href="#" data-icon="search">close</a>

</div>


<div data-role="page" id="page0_0" data-theme="a">
      
	<header class="w3-container w3-card-4 w3-theme">
	<h3 id="Choose_connection">Choose connection</h3>
	</header>

	<div id="menu_list">
		<div class='w3-container'> 
			<div class='w3-row  w3-btn '  style='background-color:#eee;width:100%;' onclick='goto_mode_page("internet"); '> 
			 	<div class='w3-col s5'> 
			 		<img class='w3-circle'  src="images/wifinet.jpg" style='position:relative;width:100%'> 
			 	</div> 
			 	<div class='w3-col s5 w3-container'> 
				 <h3  id="Internet0"  class='w3-text-yellow  '>Internet</h3 > 
				 </div> 
			 </div>   	
		 </div>  
		<div class='w3-container'> 
			<div class='w3-row  w3-btn '  style='background-color:#eee;width:100%;' onclick='goto_mode_page("local");'> 
			 	<div class='w3-col s5'> 
			 		<img class='w3-circle'  src="images/wifip2p.jpg" style='position:relative;width:100%'> 
			 	</div> 
			 	<div class='w3-col s5 w3-container'> 
				 <h3   id="Wifi_P2P" class='w3-text-yellow  '>Wifi P2P</h3 > 
				 </div> 
			 </div>   	
		 </div>  
		<div class='w3-container'> 
			<div class='w3-row  w3-btn '  style='background-color:#eee;width:100%;' onclick='location.hash ="#pageBT"'> 
			 	<div class='w3-col s5'> 
			 		<img class='w3-circle'  src="images/bluetooth.jpg" style='position:relative;width:100%'> 
			 	</div> 
			 	<div class='w3-col s5 w3-container'> 
				 <h3   id="BlueTooth" class='w3-text-yellow  '>BlueTooth</h3 > 
				 </div> 
			 </div>   	
		 </div>  	

	</div>

	<footer style="position:absolute;bottom:0%;width:100%"class="w3-container w3-theme w3-margin-top">
	<h4>&nbsp</h4>

	</footer>
	
</div> 

<div data-role="page" id="pageBT" data-theme="a">
      
	<header class="w3-opennav w3-container w3-card-4 w3-theme">
		
  		<h3>&nbsp
			
			<i id="bt_status_gif1"   style="position:absolute; left:5%; top:3%;  font-weight:100">&nbsp &nbsp &nbsp &nbsp </i>
			
			<i id="bt_status_gif" class="fa fa-search" onclick="BT_search()" style="position:absolute; left: 0%; top:3%;  font-weight:100">&nbsp search</i>

  		</h3>
		

	</header>

	<div id="BT_list">
	</div>

	<footer style="position:absolute;bottom:0%;width:100%"class="w3-container w3-theme w3-margin-top">
	<h3>&nbsp
  		<i id="back0" class="fa fa-mail-reply" onclick='location.hash ="#page0_0"' style="position:absolute; left: 0%; top:3%;  font-weight:100" >&nbsp back</i>
	
		<div id=" "  style="text-shadow:none;position:absolute; left:0%; top:40%;width:80%;font-size:12px; color:#000;font-weight:100">&nbsp</div>
	</h3>
	</footer>
	
</div> 


<div data-role="page" id="pageBT_car"   data-theme="a">
      
   <header class="w3-container w3-card-4 w3-theme">
	<h4>&nbsp
		<i id="back1" class="fa fa-mail-reply"  style="position:absolute; left:0%; top:2%;  font-weight:100" onclick='location.hash ="#page0_0";'  >&nbsp back</i>
		<i id="BT_video_b" class="fa fa-video-camera"  style="position:absolute; left:35%; top:2%;  font-weight:100" onclick="Set_IP(' ')"  >&nbsp  video</i>
	</h4>

   </header> 
    <div data-role="main" class="ui-content">
    	<div id="wifi_control" >
			<img id="car_video" src="" width="90%"  style="position:relative;-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);">
						 
		</div> 
     </div>     
     

	<footer data-position="fixed" style="position:absolute;top:70%;width:100%"class="w3-container w3-theme w3-margin-top">

		<div id="BT_control" style="position:absolute; left: 0px;top:50%;width:100%;height:100%">
		</div>		
  	  	<div id="BT_status" style="text-shadow:none;position:absolute; left:0%;top:-300px;width:80%;font-size:12px; color:#000;font-weight:100">
  	  	</div>
	  	<div id="speed_ip" style="text-shadow:none;position:absolute; left:0%;top:-300px;width:80%;font-size:12px; color:#000;font-weight:100">
  	  	</div>

		<nav class="w3-topnav  " style="text-shadow:none;position:absolute; left:0%;top:10px;width:80%;font-size:12px; color:#000;font-weight:100">
			<div  class="w3-row">
				<div style="width:15%" class="w3-col   m6">	
				<p id="speed">speed:</p>		 
				</div>
				<div style="width:80%" class="w3-col m6">
				<input    type="range" name="points" id="speed_bt"    onchange="set_speed_BT()"  value="2" min="1" max="7" data-highlight="true"  >			 
					</div>
			</div>
			<div  class="w3-row">
				<div style="width:15%" class="w3-col   m6">	
				<p id="header">header:</p>		 
				</div>
				<div style="width:80%" class="w3-col m6">
				<input    type="range" name="points" id="header_y"    onchange="y_send_BT()"  value="7" min="5" max="11" data-highlight="true"  >			 	      
				</div>
			</div>
			<button  style=" width:30%;background: url(on.png) left center no-repeat; background-size: 58px 37px;background-color:#E39937;"  data-role="none" onclick="led_onoff('local')"  class="w3-btn  ">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Ligth on/off&nbsp&nbsp&nbsp</button>
			<button  style=" width:30%;background: url('microphone.png') left center no-repeat; background-size: 38px 35px;background-color:#4cda64;"  data-role="none" onclick="voice_control_onoff() " class="w3-btn  ">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspVoice Control&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</button>
			<button  style=" width:30%;background:url('rotate.png')   center center no-repeat; background-size: 35px 30px;background-color:#ff6600;"  data-role="none" onclick="video_control() " class="w3-btn  ">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</button>

		</nav>

	 
	</footer>
	
  </div>


<div data-role="page" id="pagemode" data-theme="a">
      
	<header class="w3-opennav w3-container w3-card-4 w3-theme">
		
  		<h3>&nbsp
			
  		</h3>
	</header>

	<div data-role="main" class="ui-content">
		<div class='w3-container'> 
			<div class='w3-row  w3-btn '  style='background-color:#eee;width:100%;' onclick='mode_select("master") '> 
			 	<div class='w3-col s3'> 
			 		<img id="master_img" class='w3-circle'  src="images/usr.jpg" style='position:relative;width:100%'> 
			 	</div> 
			 	<div class='w3-col s9 w3-container'> 
				 <h3   id="master" class='w3-text-yellow  '>master</h3 > 
				 </div> 
			 </div>   	
		 </div>  
		<div class='w3-container'> 
			<div class='w3-row  w3-btn '  style='background-color:#eee;width:100%;' onclick='mode_select("slave") '> 
			 	<div class='w3-col s3'> 
			 		<img id="slave_img" class='w3-circle'  src="images/usr.jpg" style='position:relative;width:100%'> 
			 	</div> 
			 	<div class='w3-col s9 w3-container'> 
				 <h3  id="slave"  class='w3-text-yellow  '>slave</h3 > 
				 </div> 
			 </div>   	
		 </div>  

	</div> 

	<footer style="position:absolute;bottom:0%;width:100%"class="w3-container w3-theme w3-margin-top">
  		<h3>&nbsp
  			<i id="back2" class="fa fa-mail-reply" onclick='location.hash ="#page0_0"' style="position:absolute; left: 0%; top:3%;  font-weight:100" >&nbsp back</i>
			
  		</h3>
		<div id=" "  style="text-shadow:none;position:absolute; left:0%; top:40%;width:80%;font-size:12px; color:#000;font-weight:100">&nbsp</div>

	</footer>
	
</div> 

<div data-role="page" id="pagewifi" data-theme="a">
      
	<header class="w3-opennav w3-container w3-card-4 w3-theme">
		
  		<h3>&nbsp
  			<i id="back3" class="fa fa-mail-reply" onclick='location.hash ="#page0_0"' style="position:absolute; left: 0%; top:3%;  font-weight:100" >&nbsp back</i>
			
  		</h3>
	</header>

	<div data-role="main" class="ui-content">
		 <h4>www</h4>
	</div> 

	<footer style="position:absolute;bottom:0%;width:100%"class="w3-container w3-theme w3-margin-top">
	<h4>&nbsp</h4>
		<div id=" "  style="text-shadow:none;position:absolute; left:0%; top:40%;width:80%;font-size:12px; color:#000;font-weight:100">&nbsp</div>

	</footer>
	
</div> 

<div data-role="page" id="pagewifi_slave" data-theme="a">
      
	<header class="w3-opennav w3-container w3-card-4 w3-theme">
		
  		<h3>&nbsp
  			<i id="back4" class="fa fa-mail-reply" onclick='location.hash ="#page0_0"' style="position:absolute; left: 0%; top:3%;  font-weight:100" >&nbsp back</i>
			
  		</h3>
	</header>

	<div data-role="main" class="ui-content">
		<button  data-role="none"   class="w3-btn w3-teal"  id="open hot wifi"  onclick="open_hotwifi(' ')">open hot wifi  </button>
	</div> 

	<footer style="position:absolute;bottom:0%;width:100%"class="w3-container w3-theme w3-margin-top">
	<h4>&nbsp</h4>
		<div id=" "  style="text-shadow:none;position:absolute; left:0%; top:40%;width:80%;font-size:12px; color:#000;font-weight:100">&nbsp</div>

	</footer>
	
</div> 

<div data-role="page" id="page0" data-theme="a">
      
	<header class="w3-container w3-card-4 w3-theme">
		<h3>
		<i id="Users" class="w3-opennav fa fa-bars" onclick="w3_open()">Users</i>
			
		</h3>
		<div id="s_statusgif"  style="position:absolute; left:20%; top:3%;width:80%;font-size:16px; font-weight:100">&nbsp</div>

	</header>


	<nav class="w3-sidenav w3-card-2 w3-white" style="width:60%;height:82%;display:none;">
		<div class="w3-container w3-theme-d2">
		<span onclick="w3_close()" class="w3-closenav w3-right w3-xlarge">x</span>
		<br>
		<div class="w3-padding w3-center">
		<img class="w3-circle" src="images/usr.jpg" alt="avatar" style="position:relative;width:70%">
		</div>

		  
		</div>
		<br>
			<form class="w3-form" data-role="none">
				<label id="My_ID">My ID</label>
				<input data-role="none" class="w3-input" type="text" id="caller-id"  ></input>
				<hr>
				<label id="Pass_word">Pass word</label>		
				<input data-role="none" class="w3-input" type="text" id="caller-id-pass"  ></input>
				<hr>
			</form>	 	
			<div data-role="none" class="w3-btn-group">	 
				 <button  data-role="none"   class="w3-btn w3-teal"  id="login2" onclick="setID()">Save</button>
				 <button  data-role="none"   class="w3-btn w3-teal"  id="Close"  onclick="w3_close()">Close</button>
			</div>
	</nav>

	<div id="usr_list">
	</div>

	<footer style="position:absolute;bottom:0%;width:100%"class="w3-container w3-theme w3-margin-top">
	<h3>&nbsp
		<div id="s_status"  style="text-shadow:none;position:absolute; left:0%; top:40%;width:80%;font-size:12px; color:#000;font-weight:100">&nbsp</div>
		<i id="back5" class="fa fa-mail-reply"  style="position:absolute; left:2%; top:15%;  font-weight:100" onclick='location.hash ="#page0_0"; '  >&nbsp back</i>
</h3>
	</footer>
	
</div> 
<!-- -->


<!-- -->
<div data-role="page" id="pageone" data-theme="a">
      

   <div data-role="header"  onclick=" location.hash ='#page0';" data-position="fixed" class="w3-container w3-card-4 w3-theme">

   </div> 
    <div data-role="main" class="ui-content">
		 
		<video   controls ="controls" width="320" height="320" id="remote-video" autoplay  >
		
		</video>
	<!--	
	<canvas   style="border: 1px solid #ccc; top:0px;margin-left: 0px;" id="myCanvas" width="200" height="200"></canvas>

	<button  style=" width:10%;background:   center center no-repeat; background-size: 58px 37px;background-color:#4cda64;"  data-role="none" onclick="clearCanvas(canvas,ctx);" class="w3-btn w3-red">clear</button>
	<button  style=" width:10%;background:   center center no-repeat; background-size: 58px 37px;background-color:#4cda64;"  data-role="none" onclick="canvas_send();" class="w3-btn w3-red">send</button>
	 -->
		
    
	       
		<div id="draggable" class="w3-form w3-card-4 ui-widget-content" style="display:none;position: absolute; right: 0px; ">
		 
			<img  data-role="none" style="transform:rotate(-90deg);" src="images/arrow.png"  id="b1" onclick="car_runhi()"> </img>
			<img  data-role="none"   src="images/arrow.png" id="b2" onclick="car_right()">  </img>
			<img  data-role="none" style="transform:rotate(-270deg);" src="images/arrow.png"  id="b3" onclick="car_back()"> </img>
			<img  data-role="none"  style="transform:rotate(-180deg);" src="images/arrow.png"  id="b4" onclick=" car_left()"> </img>			 
			<img  data-role="none"  style="position: absolute;left: 70%;top:0%;width:30px;height:30px"  src="images/close.png"   id="closeb" onclick="$( '#draggable').hide(500);"> </img>

		</div>
	<!-- 		  
			<div  class="w3-row">
				<div style="width:50%" class="w3-col   m6">	
				<input   type="range" name="points" id="pointsx"   onchange="x_send(); "  value="6" min="3" max="9" data-highlight="true"  >			 
				</div>
				<div style="width:50%" class="w3-col m6">
				<input    type="range" name="points" id="pointsy"    onchange="y_send(); "  value="6" min="3" max="9" data-highlight="true"  >			 
		 		</div>
			</div>
 	-->
		
		

		<video    id="local-video"  width="200" height="180"  autoplay muted></video>
	
	     <hr>
	     
		 
		<div id="messages">  </div>
		<div id="s_status_q"  style="text-shadow:none;position:absolute; left:0%; top:40%;width:80%;font-size:12px; color:#000;font-weight:100">&nbsp</div>
		
		<div data-role="none" id="myidd">  </div>
	     </div>
	     
	 <div data-role="footer" data-position="fixed" data-fullscreen="true">
		<div  id="car_control_ui0" class="w3-form w3-card-4 ui-widget-content" style="position: absolute; top:10px;right: 10px; width:120px;height:120px">

			<img  data-role="none" style="transform:rotate(-90deg);" src="images/arrow.png"  id="c_front" onclick="car_runhi()"> </img>
			<img  data-role="none"   src="images/arrow.png" id="c_right" onclick="car_right()" >  </img>
			<img  data-role="none" style="transform:rotate(-270deg);" src="images/arrow.png"  id="c_back" onclick="car_back()"> </img>
			<img  data-role="none"  style="transform:rotate(-180deg);" src="images/arrow.png"  id="c_left" onclick=" car_left()" > </img>			 
			<img  data-role="none"  style="transform:rotate(0deg);" src="on.jpg"  id="c_center" onclick=" led_onoff('')" > </img>			 
		</div>

			<img id="car_loading0"   src="images/progress.gif" style="text-shadow:none; position:absolute; bottom:-10%;left:20%;width:50%;">
			<img id="car_loading1"   src="images/car0.png" style="text-shadow:none; position:absolute; top:20%;left:70%;width:10%;">

		      <nav class="w3-topnav  " id="car_control_ui1">
				<div  class="w3-row">
					<div style="width:10%" class="w3-col   m6">	
						<p id="angle">angle:</p>	
						
					</div>

					<div style="width:1%" class="w3-col m6">
						<input   class="vranger" data-role="none" type="range" name="points" id="pointsx"    onchange="x_send(); "  value="6" min="3" max="9" data-highlight="true" data-type="vertical" >			 
					</div>
						
				</div>
		 	</nav>
		  <!--    <div style="width:20%" class="w3-col">
				<select data-role="none" class="w3-select"  id="day_id">
				 
					 
				</select>
			</div>	 -->
			<button  style=" width:30%;background: url(hang_up.jpg ) center center no-repeat; background-size: 58px 37px;background-color:#4cda64;"  data-role="none" onclick="hangup()"  class="w3-btn w3-red">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</button>
			<button  style=" width:30%;background: url('call.jpg') center center no-repeat; background-size: 38px 35px;background-color:#4cda64;"  data-role="none" onclick="wakup_call_t(); " class="w3-btn  ">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</button>
			<button   style=" width:30%;background:url('rotate.png')   center center no-repeat; background-size: 35px 30px;background-color:#ff6600;"  data-role="none" onclick="RotateVideo() " class="w3-btn  ">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</button>


	    	   
       </div>

  </div>

<div data-role="page" id="txt_chat" data-transition="slide">
	<div data-role="header">
	<h1>text  chat</h1>
	</div>

	<div data-role="content">
		<p>
		Re msg: <input type="select" id="receive-id" size="15">
		</p>
		<p>
		Sendmsg: <input type="select" id="send-id" size="5">
		<button class="ui-btn ui-btn-inline"  id="sendmsg"  >Smsg</button>
		</p>
              <input  data-role="none"   type="select" id="net_sendid" size="15">
		<button  data-role="none"  id="" onclick="net_send()">net send </button>
		<button  data-role="none" onclick="update_user(); " class="w3-btn w3-teal"> update </button>

	</div>

	<div data-role="footer" data-position="fixed" data-fullscreen="true">
		<div data-role="navbar" data-iconpos="right">
			<ul>
				<li><a href="#pageone" data-icon="home" data-transition="slide">Home</a></li>
				<li><a  href="#" data-icon="arrow-r">text chat</a></li>
				<li><a  href="#login_chat" data-icon="arrow-r">login</a></li>
			</ul>
		</div>
	</div>
</div> 

<div data-role="page" id="login_chat" data-transition="slide">
	<div data-role="header">
		<div data-role="navbar" data-iconpos="right">
	      <ul>
	        <li><a href="#pageone" data-icon="home" data-transition="slide">back</a></li>
	        
	      </ul>
	    </div>
	</div>

	<div data-role="content">

	<form class="w3-form" data-role="none">
		<label>My ID</label>
		<input data-role="none" class="w3-input" type="text" id="caller-id"  ></input>
		<hr>
		<label>Pass word</label>		
		<input data-role="none" class="w3-input" type="text" id="caller-id-pass"  ></input>
		<hr>
	</form>	 	
	 
		 <button   class="ui-btn ui-btn-inline"  id="login2" onclick="setID()">Save</button>
		 <a class="ui-btn ui-btn-inline" href="#pageone"  data-icon="home" data-transition="slide">back</a>		

		 <button class="ui-btn ui-btn-inline" style="display:none " id="dial">Call</button>
		<input style="display:none " size="3" type="text" id="recipient-id"></input>
		 
	</div>

	<div data-role="footer" data-position="fixed" data-fullscreen="true" >
	   <div data-role="navbar" data-iconpos="right">
	      <ul>
	        <li><a href="#pageone"  data-icon="home" data-transition="slide">back</a></li>
	        
	      </ul>
	    </div>
	</div>
	
 

 </div> 
 

<div  id="ialert"  data-role="dialog">
	<div data-role="header">
	<h1> warn</h1>
	</div>

	<div data-role="content">
		<p id="ialert_txt"></p>
	</div>

	<div data-role="footer">
	<a    href="#pageone"   class="ui-btn ui-btn-inline">&nbsp&nbsp&nbsp&nbsp&nbsp&nbspback&nbsp&nbsp&nbsp&nbsp&nbsp</a>

	</div>
</div>

<div data-role="page" id="page_face" data-theme="b"  style="background:#E39937;">

	<div style="background-color:#E39937"  id=" " onclick=''>
	
		<img  id="face_img0" src="images/l.png" style='width:200px;top:0%;left:20%;'> 
		<img   id="face_img1"  src="images/l.png" style='width:200px;bottom:0%;left:20%;'> 

	</div>
	<div data-role="footer">
	<div  id="s_status0_0"   style="text-shadow:none;position:absolute; left:0%; top:40%;width:80%;font-size:12px; color:#000;font-weight:100">&nbsp</div>
       </div>
</div> 

	<script src="../peer.js"></script>
	<script src="../main.js"></script>
	<script src="../sheep.js"></script>

	<script src="js/TouchControl.js"></script>
	<script src="js/demo.js"></script>
	<script src="js/language.js"></script>
  </body>
</html>
